<template>
  <v-chart
    class="chart"
    :style="{ height, width }"
    :option="options"
    @click="onClick"
    ref="myChart"
  ></v-chart>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
use([
  CanvasRenderer,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])
export default {
  components: {
    VChart
  },
  props: {
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    options() {
      let echarts = this.$echarts
      let { data } = this;
      var dataValue = data.map(item => {
        return item.value;
      });
      var indicatorArr = data.map(item => {
        var obj = {
          name: item.name,
          max: item.max,
        };
        return obj;
      })
      let option = {
        title: {
          text: ''
        },
        radar: [
          {
            indicator: indicatorArr,
            center: ['50%', '50%'],
            radius: 70,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#333'
              }
            },
            splitArea: {
              areaStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#BEBEBE'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#DBDBDB'
              }
            }
          }
        ],
        series: [
          {
            name: '雷达图',
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: dataValue,
                name: this.title,
                areaStyle: {
                  color: 'rgba(233, 244, 255, 0.5)'
                },
                lineStyle: {
                  color: '#1A8CE7'
                }
              }
            ]
          }
        ]
      }
      return option
    }
  },
  mounted() {
    window.addEventListener('resize', this.resizeTheChart)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeTheChart)
  },
  methods: {
    resizeTheChart() {
      if (this.$refs.myChart) {
        this.$refs.myChart.resize()
      }
    },
    onClick(e) {
      if (e.componentType === 'radar') {
        this.$emit('e-click', e, this.name)
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
